
<template>
	<div class="goodsList">
		<div class="item" v-for="item in goodsList" :key="item.id" @click="goGoodsInfo(item.id)">
			<img :src="item.img_url" alt="">
			<h4 class="title">
				{{item.title}}
			</h4>
			<div class="productDesc">
				<p class="price">
					<span class="now">￥{{item.sell_price}}</span>
					<span class="before">￥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩余{{item.stock_quantity}}件</span>
				</p>
			</div>
		</div>
		<mt-button type="danger" plain  size="large" @click="	getMore">加载更多</mt-button>
		
	</div>
</template>
<style lang="scss" socped>
	.goodsList{
		display: flex;
		justify-content:space-between;
		flex-wrap:wrap;
		// 两列布局
		padding: 7px;
		background-color: #fff;
		.item{
			width: 49%;
			border:1px solid #ddd;
			padding: 2px;
			margin-bottom: 7px;
			display: flex;
			flex-direction:column;
			justify-content:space-between;

			img{
				width: 100%;
			}
			.title{
				font-size: 14px;
			}
			.productDesc{
				background-color: #ddd;
				.price{
					.now{
						color:red;
						font-size: 14px;

					}
					.before{
						margin-left: 10px;
						font-size: 12px;
						text-decoration: line-through;
					}
				}
				.sell{
					margin:0px;
					display: flex;
					justify-content:space-between;
				}
			}

		}

	}
</style>
<script type="text/javascript">
	
	export default{
		data:function(){
			return {
				goodsList:[],//商品列表数组
				pageindex:1
			}
		},
		methods:{
			// 获取商品列表数组
			getGoodsList(){
				this.$http.get('api/getgoods?pageindex='+this.pageindex).then(result=>{
					if(result.body.status==0)
					{
						this.goodsList=this.goodsList.concat(result.body.message);
					}

				});
			},
			// 加载更多
			getMore(){
				this.pageindex++;
				this.getGoodsList();
			},
			//跳转到商品详情页面,使用编程式导航
			goGoodsInfo(id){
				this.$router.push('/home/goodsList/goodsInfo/'+id);//push括号里面的可以是path
			}


		},
		created:function(){
				this.getGoodsList();
		}
	}
</script>